<template>
  <div
    class="floating-link-window"
    :style="windowStyle"
  >
    <div class="link-content">
      <div class="link-header">
        <span>快捷菜单</span>
      </div>
      <div class="link-list">
        <a
          v-for="(link, index) in links"
          :key="index"
          :href="link.url"
          target="_blank"
          class="link-item"
        >
          <i :class="link.icon"></i>
          <span class="link-text">{{ link.name }}</span>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FloatingLinkWindow',
  props: {
    links: {
      type: Array,
      default: () => [
        { name: '北师大地方教材平台', url: 'https://dfjc.100875.com.cn/', icon: 'el-icon-s-platform' },
        { name: '基础教育教材', url: 'https://www.100875.com.cn/show/index.html', icon: 'el-icon-document' }

      ]
    },
    position: {
      type: Object,
      default: () => ({
        right: '30px',
        top: '220px'
      })
    }
  },
  data () {
    return {
      scrollY: 0,
      lastScrollY: 0,
      ticking: false
    }
  },
  computed: {
    windowStyle () {
      return {
        right: this.position.right,
        top: `calc(${this.position.top} + ${this.scrollY}px)`,
        transform: 'translateY(0)'
      }
    }
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy () {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll () {
      this.lastScrollY = window.scrollY || document.documentElement.scrollTop

      if (!this.ticking) {
        window.requestAnimationFrame(() => {
          // 添加缓动效果，使移动更平滑
          this.scrollY += (this.lastScrollY - this.scrollY) * 0.1
          this.ticking = false
        })
        this.ticking = true
      }
    }
  }
}
</script>

<style scoped>
.floating-link-window {
  position: fixed;
  z-index: 9999;
  transition: top 0.2s ease-out;
}

.link-content {
  background: white;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  width: 165px; /* 缩小宽度 */
}

.link-header {
  padding: 10px 12px;
  background: #409EFF;
  color: white;
  font-size: 14px;
  font-weight: 500;
}

.link-list {
  padding: 8px 0;
}

.link-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  color: #606266;
  text-decoration: none;
  transition: all 0.2s;
  font-size: 13px;
}

.link-item:hover {
  background: #ecf5ff;
  color: #409EFF;
}

.link-item i {
  margin-right: 8px;
  font-size: 14px;
  width: 16px;
  text-align: center;
}

.link-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
